 <template>
  <div>
    <!-- 登录 -->
    <div class="loginbox sign-in-form">
      <div class="titlebt">3DM广告后台系统</div>
      <div class="title">登录</div>
      <el-form
        ref="loginform"
        :model="loginform"
        :rules="rules"
        label-width="100px"
        class="loginform"
      >
        <el-form-item label="账号 ：" prop="user">
          <el-input v-model="loginform.user" type="text" />
        </el-form-item>
        <el-form-item label="密码 ：" prop="pwd">
          <el-input v-model.number="loginform.pwd"    show-password />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginform')">确定</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 注册 -->
    <div class="loginbox sign-up-form">
      <div class="titlebt">3DM广告后台系统</div>
      <div class="title">注册</div>
      <el-form
        ref="resfrom"
        :model="resfrom"
        :rules="rules"
        label-width="100px"
        class="loginform"
      >
        <el-form-item label="账号 ：" prop="username">
          <el-input v-model.number="resfrom.username" type="text" />
        </el-form-item>
        <el-form-item label="密码 ：" prop="passwd">
          <el-input v-model.number="resfrom.passwd"   show-password  />
        </el-form-item>
        <el-form-item label="确认密码 ：" prop="pass">
          <el-input v-model.number="resfrom.pass"   show-password />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('resfrom')">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
// import {login} from '@/api/user'
// import {getToken,setToken} from '@/utils/tokin.js'
export default {
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.resfrom.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
       redirect: undefined,   //路由重定向
      loginform: {
        // user: "lly",
        // pwd: "lly402437",
        user: "",
        pwd: "",
        type:'0',
        sign:this.$md5(this.$store.state.app.md5)
      },
      resfrom: {
        username: "",
        pwd: "",
        pass: "",
      },
      rules: {
        user: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 15, message: "长度6-15个字符", trigger: "blur" },
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度6-15个字符", trigger: "blur" },
        ],
        pass: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    $route: {
       handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true,
    },
  },
  methods: {
        getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var captcha= new window.TencentCaptcha('2072025837', (rsp)=>{
              if(rsp.ret===0){
                this.$store.dispatch('user/login',this.loginform).then((res) => {
                    if(res.code==1){
                      this.$message({ message: "恭喜你，登录成功", type: "success" });
                      // this.$router.push({ path: this.redirect || '/'}).catch(() => {});
                      this.$router.go(0);
                      //  window.location.reload();
                    }else{
                      this.$message(res.msg);
                    }
                  }).catch(()=>{});
              }
        },{});
            captcha.show();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style    scoped>
.titlebt{
  text-align: center;
   padding-left: 100px;
   font-weight: bold;
   font-size: 30px;
   padding-bottom: 20px;
   color: #333;
}
.title {
  height: 50px;
  line-height: 50px;
  text-align: center;
  box-sizing: border-box;
  padding-left: 100px;
  font-size: 18px;
  padding-bottom:20px;
}
.loginbox {
  width: 400px;
}
.el-form-item {
  margin-bottom: 30px;
}

.loginform .el-button {
  width: 100%;
}
@media (max-width: 870px) {
  .loginform {
    width: 85%;
    margin: 0 auto;
  }
}

.loginbox {
  transition: all 0.2s 0.7s;
  overflow: hidden;
  position: absolute;
}
.sign-in-form {
  z-index: 2;
}
.sign-up-form {
  opacity: 0;
  z-index: 1;
}
.submit_btn {
  width: 100%;
}
</style>
<style>
.loginbox .el-form-item__label {
  height: 42px;
  line-height: 42px;
}
.loginbox .el-input__wrapper {
  height: 40px;
}
 
</style>